<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 页首 -->
    <header>
        <div class="center-wrap">
            <!-- logo -->
            <div class="logo">
                <img src="./img/LOGO.png" alt="">
            </div>
            <!-- nav -->
            <nav>
                <ul class="nav">
                    <li class="nav-item active">
                      <a href="">首页</a>
                      <div class="line"></div>
                    </li>
                    <li class="nav-item have-pic">
                      <a href="">UI设计</a>
                      <div class="line"></div>
                      <div class="picture">
                          <img src="./img/UI.png" alt="">
                      </div>
                    </li>
                    <li class="nav-item have-pic">
                      <a href="">前端开发</a>
                      <div class="line"></div>
                      <div class="picture">
                          <img src="./img/WEB.png" alt="">
                      </div>
                    </li>
                    <li class="nav-item">
                      <a href="">不凡说</a>
                      <div class="line"></div>
                    </li>
                    <li class="nav-item">
                      <a href="">导航</a>
                      <div class="line"></div>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 横幅 -->
    <div class="banner"></div>

    <!-- 导航栏 -->
    <div class="daohang">
        <div class="center-wrap">
            <nav>
                <ul class="nav clearfix">
                    <li class="nav-item active">
                        <a href="">课程</a>
                        <div class="line"></div>
                    </li>
                    <li class="nav-item">
                        <a href="">作品</a>
                        <div class="line"></div>
                    </li>
                    <li class="nav-item">
                        <a href="">项目</a>
                        <div class="line"></div>
                    </li>
                    <li class="nav-item">
                        <a href="">师资</a>
                        <div class="line"></div>
                    </li>
                    <li class="nav-item">
                        <a href="">环境</a>
                        <div class="line"></div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- 展示 -->
    <div class="show">
        <div class="center-wrap">
            

            <!--内容 -->
            <div class="content clearfix">
                <!-- left -->
                <div class="content-left">
                    <div class="one r">小单元精品班，老师就在身边，问题随时解决</div>
                    <div class="two r">5年打磨课程体系，插画/C4D/品牌/前端代码，更全更新</div>
                    <div class="three r">设计/开发分组配合完成项目，学习真正的工作流程</div>
                    <div class="four r">全MAC电脑教学，享受专业UI设计师相同配备</div>
                </div>
                <!-- center -->
                <div class="content-desc">
                    <em class="imp">不凡学院 传统机构</em> 
                    <span>vs</span>
                </div>
                <!-- right -->
                <div class="content-right">
                    <div class="one r">小单元精品班，老师就在身边，问题随时解决</div>
                    <div class="two r">5年打磨课程体系，插画/C4D/品牌/前端代码，更全更新</div>
                    <div class="three r">设计/开发分组配合完成项目，学习真正的工作流程</div>
                    <div class="four r">全MAC电脑教学，享受专业UI设计师相同配备</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="main">
        <div class="center-wrap">
            <!-- one -->
            <div class="one-o c">
                <!-- 题目 -->
                <div class="title">
                    <!-- 左边 -->
                    <div class="title-left">
                        <div class="one">
                            <span>共两周</span>
                            <strong>第一阶段：Ui基础入门</strong>
                        </div>
                        <div class="two">
                            Ps、Ai等基础软件操作与实战；排版、配色、美术原理等基础设计理论学习
                        </div>
                    </div>
                    <!-- 右边 -->
                    <div class="title-right">
                        <span>学时共:<strong>14</strong> 周</span>
                    </div>
                </div>
                <!-- 课程内容 -->
                <div class="content clearfix">
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="two c">
                <!-- 题目 -->
                <div class="title">
                    <!-- 左边 -->
                    <div class="title-left">
                        <div class="one">
                            <span>共两周</span>
                            <strong>第二阶段：Ui基础入门</strong>
                        </div>
                        <div class="two">
                            Ps、Ai等基础软件操作与实战；排版、配色、美术原理等基础设计理论学习
                        </div>
                    </div>
                </div>
                <!-- 课程内容 -->
                <div class="content clearfix">
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="three c">
                <!-- 题目 -->
                <div class="title">
                    <!-- 左边 -->
                    <div class="title-left">
                        <div class="one">
                            <span>共两周</span>
                            <strong>第三阶段：Ui基础入门</strong>
                        </div>
                        <div class="two">
                            Ps、Ai等基础软件操作与实战；排版、配色、美术原理等基础设计理论学习
                        </div>
                    </div>
                    
                </div>
                <!-- 课程内容 -->
                <div class="content clearfix">
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="four c">
                <!-- 题目 -->
                <div class="title">
                    <!-- 左边 -->
                    <div class="title-left">
                        <div class="one">
                            <span>共两周</span>
                            <strong>第四阶段：Ui基础入门</strong>
                        </div>
                        <div class="two">
                            Ps、Ai等基础软件操作与实战；排版、配色、美术原理等基础设计理论学习
                        </div>
                    </div>
                </div>
                <!-- 课程内容 -->
                <div class="content clearfix">
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="content-box">
                        <ul>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                            <li>
                                <a href="">1、Ui初识与行业发展 <span>（ui行业现状分析/如何做好职业规划）</span></a>
                            </li>
                        </ul>
                        <div class="mask">
                            <div class="picbox">
                                <img src="./img/PS.png" alt="">
                                <img src="./img/ai_logo.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 免费课程 -->
    <div class="free">
        <div class="center-wrap">
            <!-- 标题 -->
            <div class="title">
                <p>免费公开课<span>SUPER</span></p>
            </div>
            <!-- 内容 -->
            <div class="content">
                <div class="box box1 active">
                    <div class="picbox">
                        <img src="./img/ai_logo.png" alt="">
                    </div>
                    <div class="wordbox">
                        <p><span class="gx">更新中</span><span class="desc">AI-基础教程</span></p>
                        <p class="teacher">主讲老师：飞老师</p>
                    </div>
                </div>
                <div class="box box2">
                    <div class="picbox">
                        <img src="./img/ae_logo.png" alt="">
                    </div>
                    <div class="wordbox">
                        <p><span class="gx">更新中</span><span class="desc">AI-基础教程</span></p>
                        <p class="teacher">主讲老师：飞老师</p>
                    </div>
                </div>
                <div class="box box3">
                    <div class="picbox">
                        <img src="./img/sketch_logo.png" alt="">
                    </div>
                    <div class="wordbox">
                        <p><span class="gx">更新中</span><span class="desc">AI-基础教程</span></p>
                        <p class="teacher">主讲老师：飞老师</p>
                    </div>
                </div>
                <div class="box box4">
                    <div class="picbox">
                        <img src="./img/PS.png" alt="">
                    </div>
                    <div class="wordbox">
                        <p><span class="gx">更新中</span><span class="desc">AI-基础教程</span></p>
                        <p class="teacher">主讲老师：飞老师</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <!-- 第一部分 -->
        <div class="top-part">
            <div class="center-wrap">
                <div class="box qr">
                    <img src="./img/qr.png" alt="">
                    <p>微信扫码咨询/报名</p>
                </div>
                <div class="box tel">
                    <p>电话：</p>
                    <p>188-3818-0360</p>
                    <p>(周一至周日  9:00 - 6:30 )</p>
                    <div class="zx"><a href="">在线咨询</a></div>
                </div>
                <div class="box address">
                    <p>地址：</p>
                    <p>郑州市/郑东新区金水东路绿地新都会/6号楼1210</p>
                    <p>微信：</p>
                    <p>bufanxueyuan</p>
                </div>
                <div class="box wx-and-wb">
                    <span class="iconfont icon-weixin"></span>
                    <span class="iconfont icon-weibo"></span>
                </div>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="bottom-part">
            <div class="center-wrap">
                <div class="c">
                    <ul class="clearfix">
                        <li>友情链接:</li>
                        <li>
                            <a href="">站酷</a>
                        </li>
                        <li>
                            <a href="">花瓣</a>
                        </li>
                        <li>
                            <a href="">ui中国</a>
                        </li>
                        <li>
                            <a href="">爱国过</a>
                        </li>
                        <li>
                            <a href="">githup</a>
                        </li>
                        <li>
                            <a href="">csdn</a>
                        </li>
                        <li>
                            <a href="">花瓣</a>
                        </li>
                    </ul>
                    <span>Copyright© 2017 不凡学院    豫ICP备 17015347号 </span>
                </div>
            </div>
        </div>
    </footer>

    <!-- 点我咨询 -->
    <div class="i-know">
        <span class="iconfont icon-weixin"></span>
        点我咨询
    </div>
</body>
</html>